<template>
  <view class="main">
    <img
      class="atv"
      :src="userInfo.avatar"
      alt=""
    />
    <div class="title">007</div>
    <div class="two">
      <div class="row">
        个性签名:<input
          v-model="firstName"
          placeholder="点击设置自己的个签"
          placeholder-class=""
          @input="inputFn"
          class="text"
        />
      </div>
      <p class="row">生日:<span class="text">--</span></p>
      <p class="row">星座: <span>{{xinzuo}}</span> </p>
      <p class="row">兴趣:<span class="text">骑车</span></p>
    </div>
    <div class="last">
        <span>{{    '「 ' + arr[Math.floor(Math.random() * 25)] + '」' }}</span>
    </div>
  </view>
</template>

<script>
import { onMounted, ref } from 'vue';

export default {
  setup() {
    const userInfo = ref('')
    let xinzuo = '射手1'
    let birthday = '2000/01/01'
    let interesting = '爱好'
    let signature = '点击设置自己的个签'
    let arr = ref([
      "生命短暂，艺术长存。 - 亚里士多德",
      "行动是治愈一切疾病的良药。 - 阿拉伯谚语",
      "知识改变命运。 - 罗伯特·法尔肖",
      "荷尔蒙决定一见钟情，多巴胺决定天长地久。--网易云-不自爱里迷失",
      "机会是为有准备的人而存在的。 - 路易·巴斯德",
      "成功的秘密在于始终如一。 - 本杰明·迪斯雷利",
      '行为胜于言辞。 - 约翰·福斯特·达尔顿',
      '用心触摸生活的细节。 - 亨利·詹姆斯',
      '健康是人类最大的财富。 -- 张爱玲',
      "志在山顶的人不会贪念山脚的风景。",
      "三思而后行 - 孟子",
      "成功源于追求卓越的态度 - 亨利·福特",
      "心有多大，舞台就有多大。 - 孙中山",
      "去年花里逢君别，今日花开已一年。 --寄李儋元锡",
      "征服的荣光背后，是无数的悲泣与哀号。 --明朝那些事儿",
      "谎言重复一千遍就成了真理。 --纳粹德国宣传部长",
      "急雨收残暑，梧桐一叶惊。 --西游记",
      "取法于上，仅得为中；取法于中，故为其下。 --每日一习话",
      "相恨不如潮有信，相思始觉海非深。 --浪淘沙·借问江潮与海水",
      "理智不是一个统计学概念。 --1984",
      "山有木兮木有枝，心悦君兮君不知。 --越人歌",
      "那些听不见音乐的人以为跳舞的人疯了。 --上帝死了",
      "执笔洇墨铸流年，仗剑酌酒碎绮梦 --绘浮生",
      "为者常成，行者常至。 --晏子春秋·内篇杂下",
    ]);

    const inputFn = (e) => {
      console.log(1111, e);
      firstName.value = e.target.value
    }
    return {arr, xinzuo, inputFn}
    onMounted(() => {
      // 从本地获取 key 为 "myData" 的数据
      const data = uni.getStorageSync('userInfo');
      console.log(data);  // 输出：Hello, UniApp!
      userInfo.value = data
    })
    return {arr, xinzuo, userInfo, birthday, interesting, signature}
},
};
</script>

<style lang="scss" scoped>
.main {
  width: 100%;
  height: 100vh;
  // margin: 50px auto;
  text-align: center;
  background: url('http://zxjp-dzg-1301158478.cos.ap-shanghai.myqcloud.com/Image/2023-11-19/222.webp');
  background-repeat: no-repeat ;
  background-size:  cover ;
}

.title {
  font-weight: 700;
}
.atv {
  margin-top: 30px;
  width: 80px;
  height: 80px;
  border-radius: 50%;
}

.two {
  border-radius: 5%;
  border: 1px dotted pink;
  background-color: #fff;
  margin: 20px;
  text-align: left;
  opacity: .7;
  .row {
    display: flex;
    align-items: center;
    padding-left: 20px;
    height: 50px;
    line-height: 50px;
    border-bottom: 1px solid pink;
    display: flex;
    align-items: center;
    .text {
      margin-left: 10px;
      display: inline-block;
      width: 70%;
    }
  }
}
.last {
    position: fixed;
    bottom: 260px;
    text-align: center;
    color: #999;
    width: 100%;
}
</style>

